import styled from 'styled-components';
import Icon from '../../component/Icon';
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { formatSecond } from '../../utils/time'
import NumberCounter from '../../component/NumberCounter';
import IconPowerBg from '../../asserts/home_power_box.png';
import { CYCLE_UNIT, SECOND_MILL } from '../../constants';

const LINE_WIDTH = 200
const LINE_HEIGHT = 23

interface Props {
    start?: boolean;
    total: number;
    current: number;
    unit?: string;
    className?: string;
    count: number | {
        start: number,
        end: number
    };
    duration?: number
    stopTime?: number;
}

const Container = styled.div`
    display: flex;
    flex-direction: column;
`

const Count = styled.div`
    display: flex;
    align-items: center;
    justify-content: center;
    margin: .75rem 0;
    font-weight: bold;
    font-size: .875rem;
`
const CountTitle = styled.span`
    margin-top: -3px;
    font-weight: bold;
`

const Logo = styled(Icon)`
    margin: 0 .375rem;
`

const PowerLine = styled.div`
    height: 3.625rem;
    display: flex;
    justify-content: center;
    align-items: center;
`

const PowerBox = styled.div`
    position: relative;
    height: 100%;
    background: url(${IconPowerBg}) no-repeat no-repeat center;
    background-size: cover;
    width: 233px;
    padding-top: .75rem;
    box-sizing: border-box;
`

const Progress = styled.div<{ $percent: number }>`
    position: absolute;
    left: calc(50% - 1px);
    top: 0;
    margin-top: 16px;
    transform: translate(-50%, 0);
    background: ${({ $percent }) => `linear-gradient(to right, #01BFBF ${$percent}%, rgba(0, 0, 0, 0) ${$percent}%)`};
    width: ${LINE_WIDTH - 11}px;
    height: ${LINE_HEIGHT - 8}px;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 12px;
    color: #FFFFFF;
`

const Time = styled.div`
    font-weight: normal;
    font-size: 11px;
    color: #01BFBF;
`

const CounterBox = styled(NumberCounter)`
    .number {
        width: .625rem;
        height: auto;
        padding: 0;
        line-height: normal;
        background-color: transparent;
        margin-right: 0;
        color: #FEA327;
        font-size: .875rem;
    }
`

const Countdown: React.FC<{ time?: number }> = ({ time }) => {
    const { t } = useTranslation();
    const [countdown, setCountdown] = useState('')
    useEffect(() => {
        if (!time) {
            setCountdown('')
            return
        }
        let currentTime = time;
        setCountdown(formatSecond(currentTime, false))
        const timer = setInterval(() => {
            if (currentTime <= 0) {
                clearInterval(timer)
                return;
            }
            currentTime = currentTime - 1;
            setCountdown(formatSecond(currentTime, false))
        }, SECOND_MILL)
        return () => clearInterval(timer)
    }, [time])
    return countdown ? <Time>{`${t('home.countdown')}: ${countdown}`}</Time> : <></>
}

const Power: React.FC<Props> = ({ duration, className, start, total, current, count, stopTime, unit = CYCLE_UNIT }) => {
    const { t } = useTranslation();
    const c = useMemo(() => current < 0 ? 0 : current, [current])
    const percent = useMemo(() => parseInt(String((c / total) * 100)), [c, total])
    const floatSettings = useMemo(() => ({ fix: 9 }), [])
    const [animationKey, setAnimationKey] = useState(0);

    const value = useMemo(() => {
        return typeof count === 'number' ? {
            start: 0,
            end: count
        } : count
    }, [count])

    const onCounterEnd = useCallback(() => {
        setAnimationKey(pre => pre + 1)
    }, [])

    return <Container className={className}>
        {start && <Count>
            <CountTitle>{t('home.probing')}</CountTitle>
            <Logo
                name='icon_coin'
                width='16px'
            />
            <CounterBox
                key={animationKey}
                interval={2}
                onEnd={onCounterEnd}
                duration={duration}
                numberClassName='number'
                startValue={value.start}
                endValue={value.end}
                defaultDigitCount={15}
                float={floatSettings}
            />
        </Count>}
        <PowerLine>
            <PowerBox>
                <Icon
                    name='home_power'
                    width={`${LINE_WIDTH}px`}
                    height='23px'
                />
                <Progress $percent={percent}>{`${c}${unit}/${total}${unit}`}</Progress>
                <Countdown time={stopTime} />
            </PowerBox>
        </PowerLine>
    </Container>
}

export default Power;